/** @author: duanhaijiao  @date 2022/7/5--16:05 **/

/* name: "inform" */
<template>
    <div class="inform-con">
        <div v-if="!showDetail" class="inform-con-list">
            <div class="inform-con-item" v-for="(item,index) in dataList">
                <div class="flex flex-align-center flex-space-between pointer" @click="getDetail(item)">
                    <p class="flex flex-align-center inform-con-item-title">
                        <i class="inform-con-item-title-tip"></i>
                        {{item.title}}
                    </p>
                    <span class="inform-con-item-time">
                                {{item.createtime}}
                    </span>
                </div>
                <!-- <el-divider v-if="(index+1)%5==0"></el-divider> -->
            </div>
            <div class="flex" style="margin-top: 20px ;justify-content: center">
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        background
                        hide-on-single-page
                        layout="prev, pager,next, total, jumper"
                        :total="dataTotal">
                </el-pagination>
            </div>

        </div>
        <div class="detail" v-else>
            <div class="detail-top">
                <h1 class="detail-title">
                    {{detailInfo.title}}
                </h1>
                <div class="flex flex-align-center detail-sub-title" style="justify-content: center">
                    <p>
                        {{detailInfo.ks_test}}
                    </p>
                     <p style="margin-top: 4px;margin-left: 18px">
                         {{detailInfo.author}}   {{detailInfo.createtime}}
                     </p>
                </div>

            </div>
            <div class="detail-con" v-html="detailInfo.content">
            </div>
            <div v-if="detailInfo.next" class="detail-con-next pointer" @click="getDetail(detailInfo.next)">
                <span class="detail-con-next-com">下一篇：</span><span>{{detailInfo.next.title}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    import {pageMixin} from './mixins'

    export default {
        name: "inform",
        components: {},
        mixins: [pageMixin],
        data() {
            return {}
        },

        methods: {}
    };
</script>

<style lang="scss">
    .inform-con {
        .inform-con-list {
            padding: 20px;

            .inform-con-item {
                padding: 60000px 0;
                .inform-con-item-title{

                    font-size: 15px;
                }
                .inform-con-item-title-tip {
                    width: 3px;
                    height: 3px;
                    margin-right: 10px;
                    border-radius: 50%;
                    background: #999;
                }

                .inform-con-item-time {
                    font-size: 15px;
                    color: #ccc;
                }
            }
        }
    }

    .detail {
        width: 80%;
        margin: auto;

        .detail-top {
            text-align: center;
            padding: 30px;
            border-bottom: 1px solid #f1f1f1;

            .detail-title {
                margin-bottom: 10px;
                font-size: 24px;
            }

            .detail-sub-title {
                width: 300px;
                margin: auto;
                color: #ccc;
                // font-size: 16px;
            }
        }

        .detail-con {
            font-size: 14px;
            line-height: 1.5;
            padding: 30px 0;
        }

        .detail-con-next {
            padding: 20px 0;
            border-top: 1px solid #f1f1f1;

            .detail-con-next-com {
                color: #999;
            }
        }
    }
</style>
